<template>
  <div class="track-list" ref="track_list">
    <template v-for="item in track_list">
      <transition name="el-zoom-in-top">
        <track-card :row_data="item" v-show="show_list"></track-card>
      </transition>
    </template>
    <div id="bottom" v-if="!$store.state.mailist.no_more && $store.state.mailist.track_list.length >= 15"><p style="width: 100px; margin: 0 auto;">加载更多中...</p></div>
  </div>
</template>
<style  lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../style/color"
  @import "../style/base.css"
  .track-list
    .el-row
      margin-bottom 0;
    .cate-selector
      margin: 20px 0
</style>

<script>
  import track_info_card from  '../components/track_info_card.vue';
  import Vue from 'vue'
  export default {
    data() {
      return {
        show: false,
        scroll_loading: false,
        no_more: false
      };
    },
    created() {
      // 如果已经ssr prefetch了数据则不再请求列表
      if (this.$store.state.mailist.track_list.length == 0) {
        this.$store.dispatch('getMailist').then(res => {
          this.$store.commit('ADD_PAGE');
          setTimeout(() => {
            this.$store.commit('SHOW_LIST', true);
            //this.show = true;
          }, 50);
        }).catch(res =>{
          console.log(res);
          alert('请求数据接口时发生问题');
        });
      }
      else {
        setTimeout(() => {
          console.log('ssr preFetched');
          this.$store.commit('ADD_PAGE');
          this.$store.commit('SHOW_LIST', true);
        }, 200);
      }

    },
    mounted() {
      console.log('mounted');
      window.addEventListener('scroll', this.checkScroll);
      //this.mountCards(50, 250);
    },
    computed :{
      track_list() {
        return this.$store.getters.track_list;
      },
      show_list() {
        return this.$store.getters.showListState;
      }
    },
    activated() {
      let scroll_val = this.$store.state.mailist.scrollTop;
      if (scroll_val > 0) {
        let ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i) == "micromessenger" || ua.match(/MQQBrowser/i)=="mqqbrowser" ) {
          setTimeout(() => window.scrollTo(0, scroll_val), 20); //qq 微信浏览器下不需要加上detail页面过渡的误差
        } else {
          setTimeout(() => window.scrollTo(0, scroll_val + this.$store.state.mailist.detail_height), 20);
        }
      }
    },
    components: {
      'track-card' : track_info_card
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      mountCards: function(t1, t2) {
        // 可以尝试使用async函数
        // 过渡动画使用v-show否则无法在node渲染输出
        return new Promise((resolve) => {
          setTimeout(() => {
            this.show_cate = true;
            resolve();
          }, t1)
        }).then(() => {
          setTimeout(() => {
            this.show = true
          }, t2)
        });
      },
      handleCommand (command) {
        console.log(command);
        alert('click on item ' + command);
      },
      checkScroll() {
        let no_more = this.$store.state.mailist.no_more;
        let looding_ele = document.getElementById('bottom');
        if (looding_ele) {
          if ((document.documentElement.clientHeight > looding_ele.getBoundingClientRect().top - 200)&& this.$route.path == '/list' && !this.scroll_loading && !no_more) {
            console.log('bottom');
            this.scroll_loading = true;
            this.$store.dispatch('getMailist').then(() => {
              this.$store.commit('ADD_PAGE');
              this.scroll_loading = false;
            }).catch((res) => {
              if (res.no_more && !this.no_more) {
                this.$message('没有更多数据了');
                this.$store.commit('NO_MORE', true);
                this.scroll_loading = false;
              }
            });
          }
        }
      }
    }
  }
</script>